<template>
  <view class="content">
    <view class="bill-table-title">
      <view style="flex: 1;">品名</view>
      <view class="single-price">单价</view>
      <view style="flex: 1;text-align: right;">数量</view>
    </view>
    <scroll-view
      class="bill-content"
      :show-scrollbar="false"
      :scroll-y="true"
      @scrolltolower="lower"
    > 
      <view>
        <view v-for="index in 5" :key="index">
          <uni-swipe-action>
            <!-- 左滑显示的按钮 -->
            <uni-swipe-action-item 
              :right-options="options" 
              @click="handleClick"
            >
              <!-- 主内容 -->
              <view class="table-content">
                <view class="product-name">
                  <checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.6)" />
                  <span>某某某产品{{ index }}</span>
                </view>
                <view class="product-price">
                  <uni-easyinput style="flex: unset;" placeholder="请单价"></uni-easyinput>
                </view>
                <view class="product-num">
                  <uni-number-box v-model="vModelValue" />
                </view>
              </view>
            </uni-swipe-action-item>
          </uni-swipe-action>
          
        </view>
        <!-- 添加商品按钮 -->
        <view class="add-product-class">
          <view>
            <button class="mini-btn"type="primary" size="mini" @click="addCommodity">
              <view class="btn-class">
                <uni-icons type="plusempty" size="12"></uni-icons>
                <span>添加商品</span>
              </view>
            </button>
          </view>
          <view>
            <button class="mini-btn"type="primary" size="mini" @click="scanCode">
              <view class="btn-class">
                <uni-icons type="scan" size="12"></uni-icons>
                <span>扫码添加</span>
              </view>
            </button>
          </view>
          <view>
            <button class="mini-btn"type="primary" size="mini">
              清空
            </button>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="footer">
      <view class="count-info-class">
        <view>合计:¥1000</view>
        <view>共2件</view>
        <view>开单人:张三</view>
      </view>
      <view class="checked-class">
        <view>
          <checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />全选
        </view>
        <button class="mini-btn" style="margin:0;" type="primary" size="mini">确认开单</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      vModelValue: 1,
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ]
    }
  },
  created() {
    
  },
  methods: {
    handleClick(e) {
      console.log('点击删除', e)
      uni.showToast({ title: '删除成功' })
    },
    lower(e) {
      console.log(e)
    },
    addCommodity() {
      this.$tab.navigateTo(`/sub-packages/pages/add-commodity`)
    },
    scanCode() {
      uni.scanCode({
        onlyFromCamera: false, // 是否只能从相机扫码（false 允许从相册选择）
        scanType: ["qrCode", "barCode"], // 可扫码类型：二维码、条形码
        success: (res) => {
          console.log("扫码结果:", res);
        },
        fail: (err) => {
          console.error("扫码失败:", err);
          uni.showToast({
            title: "扫码失败",
            icon: "none"
          });
        }
      });
    }
  }
}
</script>
<style lang='scss' scoped>
  .content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    background: olivedrab;

    .bill-table-title {
      display: flex;
      padding: 20rpx 24rpx;
      justify-content: space-between;
      background-color: rgb(239, 239, 239);
      font-size: 28rpx;
      .single-price {
        width: 160rpx;
        text-align: center;
      }
    }

    .bill-content {
      flex: 1;
      background-color: #fff;
      overflow: auto;
      .table-content {
        display: flex;
        padding: 10rpx 24rpx;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2rpx solid rgb(239, 239, 239);
        .product-name {
          flex: 1;
          display: flex;
          align-items: center;
        }
        .product-price {
          width: 160rpx;
          text-align: center;
        }
        .product-num {
          display: flex;
          flex: 1;
          justify-content: flex-end;
        }
      }
      .add-product-class {
        padding: 24rpx;
        display: flex;
        justify-content: space-between;
        .btn-class {
          display: flex;
          align-items: center;
        }
      }
    }

    .footer {
      padding: 24rpx;
      background: #fff;
      border-bottom: 2rpx solid rgb(239, 239, 239);
      .count-info-class {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
      }
      .checked-class {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  ::v-deep .uni-icons {
    color: #fff !important;
    margin-right: 8rpx;
  }
</style>